<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>



<head>
    <title>具体展品详细页面-笔飞美术作品</title>
    <script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
    <%@include file="../common/jspcommon.jsp"%>
<%@include file="../common/css.jsp"%>
    <link rel="stylesheet" type="text/css" href="/css/style_zlg.css" />
    <link rel="stylesheet" type="text/css" href="/css/showImg.css" />
		  <script type="text/javascript" src="/js/jqueryui.js"></script>
		  <script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
		  <script type="text/javascript" src="/js/jquery.iviewer.js"></script>
		  <script type="text/javascript" src="/js/zoomimg.js"></script>
        <script type="text/javascript" src="/js/page/pagerpic.js"></script>
          <script type="text/javascript">
		$(function(){
			$("#page").pager({
				pagenumber : "${modelRpics.currentPage}",
				pagecount : "${modelRpics.totalPage}",
				buttonClickCallback : function(page) {
					location.href = "/artpic.htm?page="+ page+"&roomId=${roomId}";
				}
			});
		});
		function showPic(id){
			window.location.href="rpics.htm?id="+id;
		}
	</script>
</head>
<body>
<div id="box">
    <%@include file="../common/header.jsp"%>
    <div id="main_div">
        <div class="site_map"><a href="/welcome.htm">首页</a> 》<a href="artroom.htm">展览馆</a> 》<a href="/rnow.htm">当期展览</a> 》</div>
        
        <div class="main_div_top3">
            <div class="t_1 fl"><a href="#" onclick="showPic('${artPic.artPic.classId}')">返回展品页面</a></div>
            <div id="page" class="h_page" style="padding :0px 0px;"></div>
        </div>
        
        <div class="main_div_left2 mt20">
            <div class="zp_show">
                <a href="#"><img src="${artPic.artPic.imagePath}" alt="${artPic.artPic.title}" id="BigPic"/></a>
            </div>
            <div class="zp_fd">
                <a href="javascript:;" id="zooming"  ><img src="../images/btn_fd.jpg" alt=""/></a>
            </div>
            <div class="zp_list2">
                <h2>图 片</h2>
                <ul>
                <c:if test="${!empty artPic.artPic.imagePath}">
                     <li><a href="#"><img src="${artPic.artPic.imagePath}_300x200" onmouseover="javascript:document.getElementById('BigPic').src='${artPic.artPic.imagePath}';" alt=""/></a></li>
                 </c:if>
                   <c:if test="${!empty artPic.artPic.imagePath2}">
                    <li><a href="#"><img src="${artPic.artPic.imagePath2}_300x200" onmouseover="javascript:document.getElementById('BigPic').src='${artPic.artPic.imagePath2}';" alt=""/></a></li>
                      </c:if>
                   <c:if test="${!empty artPic.artPic.imagePath3}">
                    <li><a href="#"><img src="${artPic.artPic.imagePath3}_300x200" onmouseover="javascript:document.getElementById('BigPic').src='${artPic.artPic.imagePath3}';" alt=""/></a></li>
                      </c:if>
                   <c:if test="${!empty artPic.artPic.imagePath4}">
                    <li><a href="#"><img src="${artPic.artPic.imagePath4}_300x200" onmouseover="javascript:document.getElementById('BigPic').src='${artPic.artPic.imagePath4}';" alt=""/></a></li>
                    </c:if>
                   <c:if test="${!empty artPic.artPic.imagePath5}">
                   <li><a href="#"><img src="${artPic.artPic.imagePath5}_300x200" onmouseover="javascript:document.getElementById('BigPic').src='${artPic.artPic.imagePath5}';" alt=""/></a></li>
               	       </c:if>
                </ul>
            </div>
            
            <div class="zp_list3">
                <h2>相关展览</h2>
                <ul>
                <c:forEach items="${nowRList}" var="nowR">
                    <li>
                        <p><a href="#"><b>${nowR.title }</b></a></p>
                        <p> <fmt:formatDate value="${nowR.sDate }" type="date" dateStyle="long"/> - <fmt:formatDate value="${nowR.eDate }" type="date" dateStyle="long"/> 每天<fmt:formatDate value="${nowR.sTime }" type="time" timeStyle="full" pattern ="HH:mm"/>-<fmt:formatDate value="${nowR.eTime }" type="time" timeStyle="full" pattern ="HH:mm"/></p>
                        <p>${nowR.address}</p>
                    </li>
                </c:forEach>
                </ul>
            </div>
        </div>
        <div class="main_div_right2 mt20">

            <div class="right_div3">
                <div class="right_div3_t"><h2>${artPic.artPic.title}</h2></div>
                <div class="right_div3_c">
                    <p><b>时间：</b><fmt:formatDate value="${artPic.artPic.gmtCreated }" pattern="yyyy-MM-dd HH:mm:ss" /></p>
                    <p><b>作家：</b>${artPic.artPic.painter}</p>
                    <p><b>尺寸：</b>${artPic.artPic.artSize }</p>
                    <p><b>材质：</b>${artPic.artPic.material}</p>
                    <p><b>年代：</b>${artPic.artPic.years}</p>

                </div>
                <div class="btn_share">
                    <ul class="buttons">
                        <li class="button share-this"><a href="#" class="jiathis jiathis_txt jtico jtico_jiathis">分享</a></li>
                        <li><a href="#" onclick="ART.keepPic('${artPic.artPic.identifier}')">收藏</a></li>
                       <c:if test="${! empty artPic.artPic.madeLink }">
                       		<li><a href="${artPic.artPic.madeLink }" target="_blank">购买</a></li> 
                       </c:if> 
                    </ul>                    
                    <!-- JiaThis Button BEGIN -->
                    <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1358994979671444" charset="utf-8"></script>
                    <!-- JiaThis Button END -->
                </div>
                <div class="right_div3_t2">－详细描述</div>
                <div class="right_div3_c2" style="width: 326px;height: 150px">
                    <p>${artPic.artPic.content}</p>
                </div>
            </div>
        </div>
        
       
        
        <!-- foot-->
			<%@include file="../common/footer.jsp"%>
			<!-- foot--end-->
    </div>
    
    
</div>

<script type="text/javascript">

/* function zoomPic(){
	 var imageBig =$("#BigPic").attr("src");
	 alert(imageBig);
			if(!$("div.iview_box").length){
				var myzoom=new ShowView({
					//unloadOnHide:true,//完全移除弹出层
					afterShow:function(){
						var iv1 = $("#iview_img_container").iviewer({
						   src:  imageBig, //每次需传入不同图片参数
						   zoom:100,
						   update_on_resize: true,
						   zoom_animation: true,
						   mousewheel: true,
						   onMouseMove: function(ev, coords) { },
						   onStartDrag: function(ev, coords) { }, //this image will not be dragged
						   onDrag: function(ev, coords) { }
						});
						$("#iview_zi").click(function(){ iv1.iviewer('zoom_by', 1); }); 
						$("#iview_zo").click(function(){ iv1.iviewer('zoom_by', -1); }); 
						$("#iview_reset").click(function(){ iv1.iviewer('set_zoom', 100); }); 
					}	
				});	
			}else{
				ShowView.getView($("div.iview_box")).show();
			}	
} */
$(function(){
	var tit,imgsrc;
	$("#zooming").click(function(){
		tit=$("#BigPic").attr("alt"),imgsrc=$("#BigPic").attr("src");
		if(!$("div.iview_box").length){
			var myzoom=new ShowView({
				unloadOnHide:true,//完全移除弹出层
				title:tit,
				afterShow:function(){
					var iv1 = $("#iview_img_container").iviewer({
					   src: imgsrc, //每次需传入不同图片参数
					   zoom:100,
					   update_on_resize: true,
					   zoom_animation: true,
					   mousewheel: true,
					   onMouseMove: function(ev, coords) { },
					   onStartDrag: function(ev, coords) { }, //this image will not be dragged
					   onDrag: function(ev, coords) { }
					});
					$("#iview_zi").click(function(){ iv1.iviewer('zoom_by', 1); }); 
					$("#iview_zo").click(function(){ iv1.iviewer('zoom_by', -1); }); 
					$("#iview_reset").click(function(){ iv1.iviewer('set_zoom', 100); }); 
				}	
			});	
		}else{
			ShowView.getView($("div.iview_box")).show();
		}	
	});	
});
</script>
</body>
</html>
